<!--
 * @Author: your name
 * @Date: 2021-12-30 09:59:50
 * @LastEditTime: 2022-02-28 10:19:54
 * @LastEditors: 雪球
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \agricultural-production-web\src\views\statistical-report\yield-report\index.vue
-->
<template>
  <BaseMainSlot>
    <template v-slot:searchbox>
      <Search
        :day="true"
        :status="true"
        :search-list="reset"
        @search-list="searchList"
      >
        <!-- <template v-slot:leftTop>
          <div class="label-input mr-20">
            <div class="label">选择仓库:</div>
            <div class="input">
              <el-select v-model="reset.warehouseId" filterable clearable>
                <el-option value="" label="所有仓库" />
                <el-option
                  v-for="item in warehouseArr"
                  :key="item.warehouseId"
                  :label="item.warehouseName"
                  :value="item.warehouseId"
                />
              </el-select>
            </div>
          </div>
        </template> -->
        <template v-slot:right>
          <div class="search ml-20">
            <img src="~@/assets/action-bar-icon/search.png" @click="search" />
          </div>
          <div class="search ml-20">
            <img src="~@/assets/statistical-report/reset.png" @click="resets" />
          </div>
          <div class="search ml-20">
            <img
              src="~@/assets/statistical-report/export.png"
              @click="open"
            />
          </div>
        </template>
      </Search>
      <Time />
    </template>
    <template v-slot:content>
      <div class="main-box">
        <!-- 财务收入情况 -->
        <Main class="purchase-left">
          <template v-slot:top-name>
            财务收入情况
          </template>
          <template v-slot:main-content>
            <zhecharts
              :cdata="farmtaskcdata"
              :nowheight="'220px'"
              :nowwidth="'99%'"
            />
          </template>
        </Main>
        <!-- 财务支出情况 -->
        <Main class="purchase-right">
          <template v-slot:top-name>
            财务支出情况
          </template>
          <template v-slot:main-content>
            <zhecharts
              :cdata="farmtaskchasecdata"
              :nowheight="'220px'"
              :nowwidth="'99%'"
            />
          </template>
        </Main>
        <!-- 财务收支对比 -->
        <Main class="purchase">
          <template v-slot:top-name>
            财务收支对比
          </template>
          <template v-slot:main-content>
            <zhechart
              :cdata="farmcdata"
              :nowheight="'220px'"
              :nowwidth="'99%'"
            />
          </template>
        </Main>
        <!-- 财务收支明细 -->
        <Main class="outputdetails">
          <template v-slot:top-name>
            财务收支明细
          </template>
          <template v-slot:main-content>
            <div class="top">
              <el-table
                v-loading="loading"
                highlight-current-row
                :data="tableData"
                stripe
                border
                :lazy="true"
                height="86.5%"
                class="reportTable"
              >
                <el-table-column type="index" label="序号" width="50" />
                <el-table-column
                  prop="happendTime"
                  sortable
                  :formatter="dateFormat"
                  label="时间"
                />
                <el-table-column prop="incomeCost" label="收入(元)" />
                <!-- <template slot-scope="scope">
            {{ !scope.row.incomeCost ? 0 : scope.row.incomeCost }}
          </template>
        </el-table-column> -->
                <el-table-column prop="inputCost" label="支出(元)" />
                <!-- <template slot-scope="scope">
            {{ !scope.row.inputCost ? 0 : scope.row.inputCost }}
          </template> -->
                <!-- </el-table-column> -->
                <el-table-column prop="profit" label="利润(元)" />
              </el-table>
              <Pagin
                :page-size="pageSize"
                :current-page="currentPage"
                :total-size="totalSize"
                @changePageSize="changePageSize"
                @changeCurrentPage="changeCurrentPage"
              />
            </div>
            <!-- v-if="conList.length !== 0" -->
            <div class="agricultural-statistics">
              <div class="imgl">
                <div
                  class="imgdet"
                >
                  <div class="shadows-top">
                    {{ dateToEFormat(reset.startTime) }} ~ {{ dateToEFormat(reset.endTime) }}
                  </div>
                  <div class="shadows-main">
                    <h4>总收入</h4>
                    <p v-if="inputIncomeVOfrom.totalIncome">
                      <span>{{ inputIncomeVOfrom.totalIncome }}</span> 元
                    </p>
                    <p v-else>
                      <span> - </span>
                    </p>
                  </div>
                  <div class="shadows-bottom">
                    <h4>总支出</h4>
                    <p v-if="inputIncomeVOfrom.totalInput">
                      <span>{{ inputIncomeVOfrom.totalInput }}</span> 元
                    </p>
                    <p v-else>
                      <span> - </span>
                    </p>
                  </div>
                  <div class="shadows-bottom">
                    <h4>利润</h4>
                    <p v-if="inputIncomeVOfrom.totalProfit">
                      <span>{{ inputIncomeVOfrom.totalProfit }}</span>元
                    </p>
                    <p v-else>
                      <span> - </span>
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </Main>
        <!-- 收入明细 -->
        <Main class="outputdetails">
          <template v-slot:top-name>
            收入明细
          </template>
          <template v-slot:main-content>
            <div class="top" :style="{width:slidertopStyle + '%'}">
              <el-table
                v-loading="loading"
                highlight-current-row
                :data="incometableData"
                stripe
                border
                :lazy="true"
                height="86.5%"
                class="reportTable"
              >
                <el-table-column type="index" label="序号" width="50" />
                <el-table-column prop="ownName" label="类型" />
                <el-table-column prop="incomeName" label="名称" />
                <el-table-column prop="specification" label="规格">
                  <template slot-scope="scope">
                    {{ scope.row.specification }} {{ scope.row.unitName }}
                    <span v-if="scope.row.perSpecUnitName">/  {{ scope.row.perSpecUnitName }}</span>
                  </template>
                </el-table-column>
                <!-- <el-table-column prop="number" label="数量" /> -->

                <el-table-column prop="number" label="数量">
                  <template slot-scope="scope">
                    {{ scope.row.number }}
                    {{ scope.row.perSpecUnitName }}
                  </template>
                </el-table-column>

                <el-table-column prop="price" label="单价">
                  <template v-if="scope.row.price" slot-scope="scope">
                    {{ scope.row.price }} 元

                    <span v-if="scope.row.perSpecUnitName">
                      /
                      {{ scope.row.perSpecUnitName }}
                    </span>

                  </template>
                </el-table-column>
                <el-table-column prop="totalPrice" label="总价">
                  <template v-if="scope.row.totalPrice" slot-scope="scope">
                    <span> {{ scope.row.totalPrice }}元 </span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="recordDate"
                  :formatter="dateFormat"
                  min-width="120"
                  label="时间"
                />
              </el-table>
              <Pagin
                :page-size="pageSize"
                :current-page="currentPages"
                :total-size="totalSizes"
                @changePageSize="changePageSize"
                @changeCurrentPage="changeCurrentPages"
              />
            </div>
            <!-- v-if="conList.length !== 0" -->
            <div class="agricultural-statistics" :style="{width:statisticsStyle + '%'}">
              <el-carousel :autoplay="false">
                <el-carousel-item v-for="(item, index) in conList" :key="index">
                  <div class="imgl">
                    <div
                      v-for="(item1, index1) in item"
                      :key="index1"
                      class="imgdet"
                      :style="{width: imgdetStyle + '%'}"
                    >
                      <div class="shadows-top">
                        {{ dateToEFormat(list.startTime) }} ~ {{ dateToEFormat(list.endTime) }}
                      </div>
                      <div class="shadows-main">
                        <h4>销售物品名称</h4>
                        <p>
                          <span>{{ item1.inputName }}</span>
                        </p>
                      </div>
                      <div class="shadows-bottom">
                        <h4>总数量</h4>
                        <p>
                          <span>{{ item1.totalNumber }}</span> {{ item1.perSpecUnitName || item1.unitName }}
                        </p>
                      </div>
                      <div class="shadows-bottom">
                        <h4>总价</h4>
                        <p>
                          <span>{{ item1.totalPrice }}</span>元
                        </p>
                      </div>
                    </div>
                  </div>
                </el-carousel-item>
              </el-carousel>
            </div>
          </template>
        </Main>
        <!-- 支出明细 -->
        <Main class="outputdetails">
          <template v-slot:top-name>
            支出明细
          </template>
          <template v-slot:main-content>
            <div class="top" :style="{width:slidertopStyles + '%'}">
              <el-table
                v-loading="loading"
                highlight-current-row
                :data="inputTableData"
                stripe
                border
                :lazy="true"
                height="86.5%"
                class="reportTable"
              >
                <el-table-column type="index" label="序号" width="50" />
                <el-table-column prop="ownName" label="类型" />
                <el-table-column prop="inputName" label="名称" />
                <el-table-column prop="specification" label="规格">
                  <template slot-scope="scope">
                    {{ scope.row.specification }} {{ scope.row.unitName }}
                    <span v-if="scope.row.perSpecUnitName">/  {{ scope.row.perSpecUnitName }}</span>
                  </template>
                </el-table-column>
                <!-- <el-table-column prop="number" label="数量" /> -->

                <el-table-column prop="number" label="数量">
                  <template slot-scope="scope">
                    {{ scope.row.number }}
                    {{ scope.row.perSpecUnitName }}
                  </template>
                </el-table-column>

                <el-table-column prop="price" label="单价">
                  <template v-if="scope.row.price" slot-scope="scope">
                    {{ scope.row.price }}元

                    <span v-if="scope.row.perSpecUnitName">
                      /
                      {{ scope.row.perSpecUnitName }}
                    </span>

                  </template>
                </el-table-column>
                <el-table-column prop="total" label="总价">
                  <template v-if="scope.row.total" slot-scope="scope">
                    <span> {{ scope.row.total }}元 </span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="recordDate"
                  :formatter="dateFormat"
                  min-width="120"
                  label="时间"
                />
              </el-table>
              <Pagin
                :page-size="pageSize"
                :current-page="currentPagex"
                :total-size="totalSizex"
                @changePageSize="changePageSize"
                @changeCurrentPage="changeCurrentPagex"
              />
            </div>
            <!-- v-if="conList.length !== 0" -->
            <div class="agricultural-statistics" :style="{width:statisticsStyles + '%'}">
              <el-carousel :autoplay="false">
                <el-carousel-item v-for="(item, index) in conLists" :key="index">
                  <div class="imgl">
                    <div
                      v-for="(item1, index1) in item"
                      :key="index1"
                      class="imgdet"
                      :style="{width: imgdetStyles + '%'}"
                    >
                      <div class="shadows-top">
                        {{ dateToEFormat(list.startTime) }} ~ {{ dateToEFormat(list.endTime) }}
                      </div>
                      <div class="shadows-main">
                        <h4>采购物品名称</h4>
                        <p>
                          <span>{{ item1.inputName }}</span>
                        </p>
                      </div>
                      <div class="shadows-bottom">
                        <h4>总数量</h4>
                        <p>
                          <span>{{ item1.totalNumber }}</span> {{ item1.perSpecUnitName || item1.unitName }}
                        </p>
                      </div>
                      <div class="shadows-bottom">
                        <h4>总价</h4>
                        <p>
                          <span>{{ item1.totalPrice }}</span>元
                        </p>
                      </div>
                    </div>
                  </div>
                </el-carousel-item>
              </el-carousel>
            </div>
          </template>
        </Main>
      </div>
    </template>
  </BaseMainSlot>
</template>

<script>
import BaseMainSlot from "@/components/BaseMainSlot/report.vue";
import Pagin from "../components/Pagination";
import Search from "../components/search/index.vue";
import warehouseManage from "@/api/basic-info-manage/warehouse-manage";
import Main from "../components/main/index.vue";
import financial from "@/api/digital-operation/statistical-report/financial-statements";
import profit from "@/api/digital-operation/input-output-management/profit-analysis";
import costManage from "@/api/digital-operation/input-output-management/cost-manage";
import baseOutut from "@/api/digital-operation/input-output-management/base-output";
import { mymixin } from "@/utils/mixin";
import zhechart from "../components/Echarts/components/linechart/chart.vue";
import zhecharts from "../components/Echarts/components/linecharts/chart.vue";
import * as echarts from "echarts";
export default {
  components: {
    BaseMainSlot,
    Search,
    Main,
    zhechart,
    zhecharts,
    Pagin },
  mixins: [mymixin],
  data() {
    return {
      reset: {
        startDate: "",
        endDate: "",
        startTime: this.etPassYearFormatDate(),
        endTime: "",
        organizationNo: parseInt(sessionStorage.organizationNo),
        warehouseId: "",
        status: 0
      },
      status: true,
      lesseeList: [],
      warehouseArr: [],
      conList: [],
      conLists: [],
      abatchList: [],
      reportForm: {},
      // 农事任务信息
      farmcdata: {},
      farmtaskcdata: {},
      farmtaskchasecdata: {},
      tableData: [],
      incometableData: [],
      inputTableData: [],
      financial: [],
      // 当前页
      currentPage: 1,
      currentPages: 1,
      currentPagex: 1,
      // 每页的数据条数
      pageSize: 5,
      // 总条数
      totalSize: 0,
      totalSizes: 0,
      totalSizex: 0,
      list: {},
      slidertopStyle: 76,
      statisticsStyle: 23,
      imgdetStyle: 96,
      slidertopStyles: 76,
      statisticsStyles: 23,
      imgdetStyles: 96,
      inputIncomeVOfrom: {},
      // 导出查询
      export: {}
    };
  },
  created() {
    this.searchData();
  },
  mounted() {
    this.$nextTick(() => {
      this.search();
    })
  },
  methods: {
    // 搜索组件
    searchList(e) {
      // console.log(e);
      this.reset = e;
    },
    // 重置
    resets() {
      let etPassYearFormatDate = this.etPassYearFormatDate()
      // let time = new Date()
      // let endTime = (time).getTime()
      const y = new Date(etPassYearFormatDate).getFullYear()
      const f = y + ' 12-31 23:59:59:999'
      const endTime = new Date(f).getTime()
      // 重置搜索框
      this.reset = {
        startDate: "",
        endDate: "",
        startTime: etPassYearFormatDate,
        endTime: endTime,
        organizationNo: parseInt(sessionStorage.organizationNo),
        date: 'month',
        warehouseId: "",
        status: 1
      };
      this.$nextTick(() => {
        this.search()
      })
    },
    // 默认开始时间
    etPassYearFormatDate () {
      const y = new Date().getFullYear()
      // 第一天
      const f = y + ' 01-01 00:00:00'
      const date = new Date(f).getTime() - 365 * 24 * 60 * 60 * 1000
      // console.log(date)
      return date
    },
    // 总体调用接口
    datalist() {
      let params = {
        // warehouseId: this.reset.warehouseId,
        startTime: this.reset.startDate || this.reset.startTime,
        endTime: this.reset.endDate || this.reset.endTime,
        unit: this.reset.date || "month"
        // organizationNo: this.reset.organizationNo
      };
      this.export = params
      this.list = params
      this.tableDataList(params);
      this.tableIncomeDataList(params)
      this.tableInputDataList(params)
      this.ColumnChart(params)
      // this.getColumnChart(params);
      // this.getchaseColumnChart(params);
      this.reportAllBatch(params);
    },
    async tableDataList(e) {
      this.loading = true;
      let params = {
        // page: this.currentPage,
        // size: this.pageSize,
        pageNumber: this.currentPage,
        pageSize: this.pageSize,
        ...e
      };
      const res = await profit.getPageList(params);
      this.loading = false;
      let data = res.data;
      if (data) {
        data.content.forEach(item => {
          if (item.incomeCost) {
            item.incomeCost;
          } else {
            item.incomeCost = 0;
          }
          if (item.inputCost) {
            item.inputCost;
          } else {
            item.inputCost = 0;
          }
        });
        this.totalSize = data.totalElements;
        this.tableData = data.content;
        let havline = this.tableData.length % this.pageSize;
        if (this.tableData.length < this.pageSize) {
          if (havline < this.pageSize) {
            const remain = this.pageSize - havline;
            for (var i = 0; i < remain; i++) {
              this.tableData.push({
                indflag: i + this.tableData.length - 1
              });
            }
          }
        }
      }
    },
    async tableIncomeDataList(e) {
      this.loading = true;
      let params = {
        // page: this.currentPage,
        // size: this.pageSize,
        pageNumber: this.currentPages,
        pageSize: this.pageSize,
        ...e
      };
      const res = await baseOutut.getPageList(params);
      this.loading = false;
      let data = res.data;
      this.totalSizes = data.totalElements;
      this.incometableData = data.content;
      let havline = this.incometableData.length % this.pageSize;
      if (this.incometableData.length < this.pageSize) {
        if (havline < this.pageSize) {
          const remain = this.pageSize - havline;
          for (var i = 0; i < remain; i++) {
            this.incometableData.push({
              indflag: i + this.incometableData.length - 1
            });
          }
        }
      }
    },
    async tableInputDataList(e) {
      this.loading = true;
      let params = {
        // page: this.currentPage,
        // size: this.pageSize,
        pageNumber: this.currentPagex,
        pageSize: this.pageSize,
        startTime: e.startTime,
        endTime: e.endTime
      };
      const res = await costManage.seachInfo(params);
      this.loading = false;
      let data = res.data;
      this.totalSizex = data.totalElements;
      this.inputTableData = data.content;
      let havline = this.inputTableData.length % this.pageSize;
      if (this.inputTableData.length < this.pageSize) {
        if (havline < this.pageSize) {
          const remain = this.pageSize - havline;
          for (var i = 0; i < remain; i++) {
            this.inputTableData.push({
              indflag: i + this.inputTableData.length - 1
            });
          }
        }
      }
    },
    // 仓库下拉框数据
    async searchData() {
      // const { data: lessee } = await financial.organizationList();
      // this.lesseeList = lessee;
      //  条件查询所有仓库
      const {
        data: warehouse
      } = await warehouseManage.getWareHouseListByCondition();
      this.warehouseArr = warehouse;
    },
    async ColumnChart(e) {
      let { data: t_incomeCost } = await this.getColumnChart(e)
      let { data: inputCost } = await this.getchaseColumnChart(e)
      let xAxisone = { '收入': t_incomeCost.amountList, '支出': inputCost.amountList }
      let addser = [];
      if (xAxisone) {
        let listone = xAxisone;
        addser = [
          {
            name: '收入',
            type: "bar",
            data: listone['收入'],
            barMaxWidth: 20,
            itemStyle: {
              borderRadius: [10, 10, 0, 0],
              color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                { offset: 0, color: "rgba(255, 170, 170, 1)" },
                { offset: 1, color: "rgba(255, 107, 107, 1)" }
              ])
            }
          }, {
            name: '支出',
            type: "bar",
            data: listone['支出'],
            barMaxWidth: 20,
            itemStyle: {
              borderRadius: [10, 10, 0, 0],
              color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                { offset: 0, color: "rgba(102, 239, 254, 1)" },
                { offset: 1, color: "rgba(33, 105, 246, 1)" }
              ])
            }
          }
        ];
        // }
      }
      this.farmcdata = {
        xAxisdata: inputCost.dateList,
        xData: ['收入', '支出'],
        seriesData: addser,
        unitName: '元'
      };
    },
    // echarts
    async getColumnChart(e) {
      const { data: data } = await financial.outHistogramChartList(e)
      // let data = res.data;
      let xAxisone = [];
      if (data.dateList) {
        xAxisone = data.dateList;
      }
      let addser = [];
      if (data.amountList) {
        let listone = data.amountList;
        // for (let zz in listone) {
        let addobj = {
          name: '金额',
          type: "bar",
          data: listone,
          barMaxWidth: 20,
          itemStyle: {
            borderRadius: [10, 10, 0, 0],
            color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
              { offset: 0, color: "rgba(255, 170, 170, 1)" },
              { offset: 1, color: "rgba(255, 107, 107, 1)" }
            ])
          }
        };
        addser.push(addobj);
        // }
      }
      // xAxisone = xAxisone.unshift('')
      this.farmtaskcdata = {
        xAxisdata: xAxisone,
        xData: [''],
        seriesData: addser,
        unitName: '元'
      };
      // });
      return { data }
    },
    // echarts
    async getchaseColumnChart(e) {
      const { data: data } = await financial.inputCostChartList(e)
      // let data = res.data;
      let xAxisone = [];
      if (data.dateList) {
        xAxisone = data.dateList;
      }
      let addser = [];
      if (data.amountList) {
        let listone = data.amountList;
        // for (let zz in listone) {
        let addobj = {
          name: '金额',
          type: "bar",
          data: listone,
          barMaxWidth: 20,
          itemStyle: {
            borderRadius: [10, 10, 0, 0],
            color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
              { offset: 0, color: "rgba(102, 239, 254, 1)" },
              { offset: 1, color: "rgba(33, 105, 246, 1)" }
            ])
          }
        };
        addser.push(addobj);
        // }
      }
      // xAxisone = xAxisone.unshift('')
      this.farmtaskchasecdata = {
        xAxisdata: xAxisone,
        xData: [''],
        seriesData: addser,
        unitName: '元'
      };
      // });
      return { data }
    },
    open() {
      this.$confirm(`是否导出${this.$route.meta.title}.xlsx`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        customClass: "myClass"
      }).then(() => {
        this.exPort()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    // 导出
    async exPort() {
      // 点击导出搜索的数据
      this.downLoading = true;
      const data = await financial.exportExcel(this.export);
      this.downLoading = false;
      const blob = new Blob([data], {
        type: "application/vnd.ms-excel;charset=utf-8"
      });
      const link = document.createElement("a");
      // console.log()
      link.download = this.$route.meta.title + ".xlsx";
      link.style.display = "none";
      link.href = URL.createObjectURL(blob);
      document.body.appendChild(link);
      link.click();
      URL.revokeObjectURL(link.href);
      document.body.removeChild(link);
    },
    // 转化数据 跑马灯
    async reportAllBatch(e) {
      const { data: inputIncomeVO } = await financial.inputIncomeVOList(e)
      this.inputIncomeVOfrom = inputIncomeVO
      const {
        data: reportAllBatch
      } = await financial.inputIncomeCardList(e);
      if (reportAllBatch.length >= 4) {
        this.conList = this.traverList(reportAllBatch, 4);
        this.slidertopStyle = 100
        this.statisticsStyle = 100
        this.imgdetStyle = 24
      } else if (reportAllBatch.length < 4) {
        this.conList = this.traverList(reportAllBatch, 1);
        this.slidertopStyle = 76
        this.statisticsStyle = 23
        this.imgdetStyle = 96
      }
      const {
        data: reportinputCost
      } = await financial.inputCostCardList(e);
      if (reportinputCost.length >= 4) {
        this.conLists = this.traverList(reportinputCost, 4);
        this.slidertopStyles = 100
        this.statisticsStyles = 100
        this.imgdetStyles = 24
      } else if (reportinputCost.length < 4) {
        this.conLists = this.traverList(reportinputCost, 1);
        this.slidertopStyles = 76
        this.statisticsStyles = 23
        this.imgdetStyles = 96
      }
    },
    traverList(arr, n) {
      // 拆分数组(轮播图格式)
      const list = [];
      for (let i = 0; i < arr.length; i += n) {
        list.push(arr.slice(i, i + n));
      }
      return list;
    },
    dateFormat(row, colnum) {
      if (row.happendTime) {
        // console.log(row)
        return this.$moment(row[colnum.property]).format("YYYY年-MM月-DD日 HH:mm:ss");
      }
      if (row.recordDate) {
        // console.log(row)
        return this.$moment(row[colnum.property]).format("YYYY年-MM月-DD日 HH:mm:ss");
      }
    },
    search() {
      this.currentPage = 1;
      this.currentPages = 1
      this.currentPagex = 1
      this.datalist();
    },
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.tableDataList(this.reset);
    },
    changeCurrentPage(currentPage) {
      this.currentPage = currentPage;
      this.tableDataList(this.reset);
    },
    changeCurrentPages(currentPages) {
      this.currentPages = currentPages;
      this.tableDataList(this.reset);
    },
    changeCurrentPagex(currentPage) {
      this.currentPagex = currentPage;
      this.tableDataList(this.reset);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~@/styles/report.scss";
// ::v-deep .common-layout {
//     .zhcontent {
//       // height: calc(100% - 50px) !important;
//     }
//   }
.search {
  display: flex;
  flex-direction: row;
  align-items: center;
}
// 基地权限

.purchase {
  // height: 265px;
  width: 100%;
  ::v-deep .main-content {
    position: relative !important;
    padding: 50px 12px 30px;
  }
}
.purchase-left {
  // height: 265px;
  width: 49.5%;
  margin-right: 1% !important;
  ::v-deep .main-content {
    position: relative !important;
    padding: 50px 12px 30px;
  }
}

.purchase-right {
  // height: 265px;
  width: 49.5%;
  ::v-deep .main-content {
    position: relative !important;
    padding: 50px 12px 30px;
  }
}
.outputdetails {
  // height: 1000px;
  ::v-deep .main-content {
    position: relative !important;
    padding: 50px 12px 20px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    .top {
      padding: 5px;
      width: 76%;
      height: 340px;
      position: relative;
      margin-top: 10px;
    }

    // 农资
    .agricultural-statistics {
      height: 340px;
      width: 23%;
      position: relative;
      .left-top {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, 50%);
      }
      .el-carousel {
        height: 100%;
        .el-carousel__container {
          height: 100%;
        }
      }
      .imgl {
        margin: 0;
        height: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-evenly;
        position: relative;
        top: -12px;
        .imgdet {
          background: url("~@/assets/statistical-report/purchase-report/purchase.png")
            100% 100% no-repeat;
          background-size: 100% 100%;
          border-radius: 0;
          height: 85%;
          width: 96%;
          display: flex;
          align-items: center;
          flex-direction: column;
          position: relative;
          .shadows-top {
            box-sizing: content-box;
            position: absolute;
            top: -8%;
            transform: translate(0%, 50%);
            text-align: center;
            font-size: 12px;
            width: 249px;
            letter-spacing: 0;
            height: 26px;
            padding: 0 10px;
            box-sizing: border-box;
            line-height: 24px;
            background: rgba(1, 59, 77, 1);
            border: 1px solid #4affda;
            box-shadow: 0px 0 7px .5px rgb(255, 255, 255) inset;
            opacity: 1;
            border-radius: 18px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          > div {
            width: 100%;
            h4 {
              padding: 0;
              margin: 6px 0 0 0;
              text-align: center;
              letter-spacing: 1px;
            }
            p {
              padding: 0;
              margin: 5px 0 0 0;
              width: 100%;
              text-align: center;
              letter-spacing: 1px;
              span {
                font-size: 20px;
              }
            }
          }
          div:nth-child(3) {
            margin: 8px 0;
            padding: 14px 0 0 0;
          }
          div:nth-child(4) {
            margin: 8px 0;
            padding: 8px 0 0 0;
          }
          .shadows-main {
            margin: 18px 0 0 0;
            padding: 8px 0 0 0;
            height: 100px;
          }
          .shadows-bottom {
            height: 100px;
          }
        }
      }
    }
  }
}
::v-deep #chart {
  > div {
    bottom: 0;
  }
}
.facility {
  width: 210px;
  height: 20px;
  padding: 0 20px;
  overflow-x: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  span {
    white-space: nowrap;
    // margin-left: 10px;
  }
}
.facility::-webkit-scrollbar {
  height: 4px;
}
// ::v-deep .el-carousel  {
//   .el-carousel__indicators--horizontal {
//   padding: 0 10px !important;
//   display: flex;
//   width: 100%;
//   overflow-x: auto;
//   justify-content: center;
//   }
//   .el-carousel__indicators--horizontal::-webkit-scrollbar {
//     height: 4px;
//   }
// }
::v-deep .el-table {
  .el-icon {
    color: #fff;
  }
  .el-table__expanded-cell {
    background: #4affda00;
  }
}
</style>
